<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			margin: 0;
		}
		@font-face {
		    /* font-properties */
		    font-family: pictos;
		    src:url('asset/font/6NUO8FuJNQ.woff'); /* IE9 */
		}
		#keyBoard{
			width: 1135px;
    		margin: 0 auto;
		}
		.article{
			position: relative;
			width: 1135px;
			margin:0 auto;
			top:0;
		}
		.words{
			font-size: 35px;
			float: left;
			font-family: "pictos";
			margin-top: 25px;
			color: #757575;
		}
		.words .letter{
			width: 21px;
			height: 46px;
			margin: 0px;
			padding: 0px;
			display: block;
			float: left;
			outline: 1px solid white;
		}
		.token_unit_val{
		    color: #0e630e;
    		background: #e7fbd3;
		}
		.token_unit_err{
			color: darkred;
    		background: pink;
		}
		#subscript{
			position: absolute;
			display: block;
			width: 21px;
			height: 71px;
			border-bottom: 3px solid #0a6bf9;
		}

		.TP_APP1 * {
		    letter-spacing: normal;
		    line-height: normal;
		    -webkit-font-smoothing: auto;
		    -moz-osx-font-smoothing: auto;
		    -webkit-box-sizing: initial;
		    box-sizing: initial;
		}
		#app #progress-bar {
		    height: 3px;
		    border-bottom: 1px solid #bbb;
		    margin-top: 0px;
		    text-align: center;
		}
		#app #progress-percent {
		    width: 0%;
		    background: #78B8FF;
		    height: 100%;
		}
		#app * {
		    letter-spacing: normal;
		    line-height: normal;
		    -webkit-font-smoothing: auto;
		    -moz-osx-font-smoothing: auto;
		    -webkit-box-sizing: initial;
		    box-sizing: initial;
		}
		#app #progress-dot {
		    display: none;
		    float: right;
		    width: 7px;
		    height: 5px;
		    border-radius: 100%;
		    background: #1C75BC;
		    margin-top: -2px;
		}
		.container{
			overflow: hidden;
		    height: 216px;
		}
		#app{
			margin: 0 auto;
		    width: 1100px;
		}

	</style>
</head>
<body>
	<div id="app">
		
		<div class="container">
			<div class="article" ref="article">
				<span id="subscript" ref="subscript"></span>
				<div class="words" v-for="item in article">
					<span :class="{token_unit_val:val.status > 0,token_unit_err:val.status < 0}" class="letter" v-for="val in item" ref="articleLetter">{{val.letter}}</span>
				</div>
			</div>
		</div>

		<div style="clear: left; margin-bottom: 10px;"></div>
		<div id="progress-bar" ref="progressBar"><div id="progress-percent" style="width: 89.6%;" class=""><div id="progress-dot" style="display: block;" class=""></div></div></div>
		<input v-model="inputText" style="opacity: 0;" type="text" name="" id="hideInput" ref="hideInput">
		<div class="audio">
			<audio ref="audio_a">
	            <source src="./asset/audio/letter/a.mp3"></source>
	        </audio>
	        <audio ref="audio_b">
	            <source src="./asset/audio/letter/b.mp3"></source>
	        </audio>
	        <audio ref="audio_c">
	            <source src="./asset/audio/letter/c.mp3"></source>
	        </audio>
	        <audio ref="audio_d">
	            <source src="./asset/audio/letter/d.mp3"></source>
	        </audio>
	        <audio ref="audio_e">
	            <source src="./asset/audio/letter/e.mp3"></source>
	        </audio>
	        <audio ref="audio_f">
	            <source src="./asset/audio/letter/f.mp3"></source>
	        </audio>
	        <audio ref="audio_g">
	            <source src="./asset/audio/letter/g.mp3"></source>
	        </audio>
	        <audio ref="audio_h">
	            <source src="./asset/audio/letter/h.mp3"></source>
	        </audio>
	        <audio ref="audio_i">
	            <source src="./asset/audio/letter/i.mp3"></source>
	        </audio>
	        <audio ref="audio_j">
	            <source src="./asset/audio/letter/j.mp3"></source>
	        </audio>
	        <audio ref="audio_k">
	            <source src="./asset/audio/letter/k.mp3"></source>
	        </audio>
	        <audio ref="audio_l">
	            <source src="./asset/audio/letter/l.mp3"></source>
	        </audio>
	        <audio ref="audio_m">
	            <source src="./asset/audio/letter/m.mp3"></source>
	        </audio>
	        <audio ref="audio_n">
	            <source src="./asset/audio/letter/n.mp3"></source>
	        </audio>
	        <audio ref="audio_o">
	            <source src="./asset/audio/letter/o.mp3"></source>
	        </audio>
	        <audio ref="audio_p">
	            <source src="./asset/audio/letter/p.mp3"></source>
	        </audio>
	        <audio ref="audio_q">
	            <source src="./asset/audio/letter/q.mp3"></source>
	        </audio>
	        <audio ref="audio_r">
	            <source src="./asset/audio/letter/r.mp3"></source>
	        </audio>
	        <audio ref="audio_s">
	            <source src="./asset/audio/letter/s.mp3"></source>
	        </audio>
	        <audio ref="audio_t">
	            <source src="./asset/audio/letter/t.mp3"></source>
	        </audio>
	        <audio ref="audio_u">
	            <source src="./asset/audio/letter/u.mp3"></source>
	        </audio>
	        <audio ref="audio_v">
	            <source src="./asset/audio/letter/v.mp3"></source>
	        </audio>
	        <audio ref="audio_w">
	            <source src="./asset/audio/letter/w.mp3"></source>
	        </audio>
	        <audio ref="audio_x">
	            <source src="./asset/audio/letter/x.mp3"></source>
	        </audio>
	        <audio ref="audio_y">
	            <source src="./asset/audio/letter/y.mp3"></source>
	        </audio>
	        <audio ref="audio_z">
	            <source src="./asset/audio/letter/z.mp3"></source>
	        </audio>
		</div>
	</div>

	<div id="keyBoard">
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 683.3 254" style="enable-background:new 0 0 683.3 254;" xml:space="preserve">
			<style type="text/css">
				.st0{fill:none;stroke:#777777;stroke-width:0.5;stroke-miterlimit:10;}
				.st1{
			        opacity: 0;
			        font-family:'ArialMT', 'Arial', 'Helvetica', 'sans-serif';
			        font-size:15px;
			    }
			    .st2{
			        opacity: 1;
			        fill:#777777;
			    }

				.b{font-size:26px;}
				.b2{font-size:24px;}
				.s{font-size:12px;}

				path.active{ fill: rgb(121, 187, 255); }
				path.deadkey{fill: orange;}
			    text {user-select: none;}
				text.active{fill:#FFFFFF;}
				path.correct{stroke:#C2EA9A;stroke-width:4;}
				text.correct{}
				path.incorrect{fill:#E97E7E;}
				text.incorrect{fill:white;}
			</style>
			<g id="keys">
				<path id="tilda" class="st0" d="M58.4,53.7c0,1.7-1.4,3-3,3H18.9c-1.6,0-3-1.3-3-3V18.3c0-1.7,1.3-3,3-3h36.5c1.6,0,3,1.3,3,3V53.7z"/>
				<path id="key-1" class="st0" d="M103.4,53.7c0,1.7-1.3,3-3,3H63.9c-1.7,0-3-1.3-3-3V18.3c0-1.6,1.3-3,3-3h36.5c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="q" class="st0" d="M126.7,97.6c0,1.6-1.3,3-3,3H87.2c-1.7,0-3-1.4-3-3V62.3c0-1.6,1.3-3,3-3h36.5c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="a" class="st0" d="M137.4,141.5c0,1.6-1.4,3-3,3H97.9c-1.7,0-3-1.4-3-3v-35.4c0-1.7,1.3-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="z" class="st0" d="M160.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3v-35.3c0-1.7,1.3-3,3-3h36.5c1.6,0,3,1.3,3,3V185.4z"/>
				<path id="x" class="st0" d="M205.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3v-35.3c0-1.6,1.3-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="c" class="st0" d="M250.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3v-35.3c0-1.6,1.3-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="v" class="st0" d="M295.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3v-35.3c0-1.6,1.3-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="b" class="st0" d="M340.8,185.4c0,1.7-1.4,3-3,3h-36.6c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.6c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="n" class="st0" d="M385.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="m" class="st0" d="M430.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="comma" class="st0" d="M475.8,185.4c0,1.7-1.4,3-3,3h-36.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V185.4z"/>
				<path id="dot" class="st0" d="M520.8,185.4c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V185.4z"/>
				<path id="slash" class="st0" d="M565.8,185.4c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V185.4z"/>
				<path id="s" class="st0" d="M182.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="d" class="st0" d="M227.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="f" class="st0" d="M272.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="g" class="st0" d="M317.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="h" class="st0" d="M362.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="j" class="st0" d="M407.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="k" class="st0" d="M452.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="l" class="st0" d="M497.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="semicolon" class="st0" d="M542.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="quote" class="st0" d="M587.4,141.5c0,1.6-1.4,3-3,3h-36.5c-1.7,0-3-1.4-3-3v-35.4c0-1.7,1.3-3,3-3h36.5c1.6,0,3,1.3,3,3V141.5z"/>
				<path id="w" class="st0" d="M171.7,97.6c0,1.6-1.3,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="e" class="st0" d="M216.7,97.6c0,1.6-1.3,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.7,1.4-3,3-3h36.5c1.7,0,3,1.3,3,3V97.6z"/>
				<path id="r" class="st0" d="M261.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="t" class="st0" d="M306.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="y" class="st0" d="M351.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="u" class="st0" d="M396.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="i" class="st0" d="M441.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="o" class="st0" d="M486.7,97.6c0,1.6-1.4,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V97.6z"/>
				<path id="p" class="st0" d="M531.7,97.6c0,1.6-1.3,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="open-bracket" class="st0" d="M576.7,97.6c0,1.6-1.3,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="close-bracket" class="st0" d="M621.7,97.6c0,1.6-1.3,3-3,3h-36.5c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="backslash" class="st0" d="M668.8,97.6c0,1.6-1.3,3-3,3h-38.6c-1.6,0-3-1.4-3-3V62.4c0-1.6,1.4-3,3-3h38.6c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="key-2" class="st0" d="M148.4,53.7c0,1.7-1.4,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.6,1.4-3,3-3h36.5c1.6,0,3,1.4,3,3V53.7z"/>
				<path id="key-3" class="st0" d="M193.4,53.7c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3V18.3c0-1.6,1.3-3,3-3h36.5c1.6,0,3,1.4,3,3V53.7z"/>
				<path id="key-4" class="st0" d="M238.4,53.7c0,1.7-1.4,3-3,3H199c-1.7,0-3-1.3-3-3V18.3c0-1.7,1.3-3,3-3h36.5c1.6,0,3,1.3,3,3V53.7z"/>
				<path id="key-5" class="st0" d="M283.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.7,0-3-1.3-3-3V18.3c0-1.7,1.3-3,3-3h36.5c1.7,0,3,1.3,3,3V53.7z"/>
				<path id="key-6" class="st0" d="M328.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.7,1.4-3,3-3h36.5c1.7,0,3,1.3,3,3V53.7z"/>
				<path id="key-7" class="st0" d="M373.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="key-8" class="st0" d="M418.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="key-9" class="st0" d="M463.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="key-0" class="st0" d="M508.4,53.7c0,1.7-1.3,3-3,3h-36.5c-1.6,0-3-1.3-3-3V18.3c0-1.6,1.4-3,3-3h36.5c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="minus" class="st0" d="M553.4,53.7c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3V18.3c0-1.7,1.4-3,3-3h36.5c1.6,0,3,1.3,3,3V53.7z"/>
				<path id="equal" class="st0" d="M598.4,53.7c0,1.7-1.4,3-3,3h-36.5c-1.7,0-3-1.3-3-3V18.3c0-1.6,1.3-3,3-3h36.5c1.6,0,3,1.4,3,3V53.7z"/>
				<path id="backspace" class="st0" d="M668.8,53.7c0,1.7-1.3,3-3,3h-61.9c-1.7,0-3-1.3-3-3V18.3c0-1.6,1.3-3,3-3h61.9c1.7,0,3,1.4,3,3V53.7z"/>
				<path id="tab" class="st0" d="M81.7,97.6c0,1.6-1.3,3-3,3H18.9c-1.6,0-3-1.4-3-3V62.3c0-1.6,1.3-3,3-3h59.8c1.7,0,3,1.4,3,3V97.6z"/>
				<path id="capslock" class="st0" d="M92.4,141.5c0,1.6-1.3,3-3,3H18.9c-1.6,0-3-1.4-3-3v-35.4c0-1.7,1.3-3,3-3h70.4c1.7,0,3,1.3,3,3V141.5z"/>
				<path id="enter" class="st0" d="M668.8,141.5c0,1.6-1.3,3-3,3h-72.9c-1.7,0-3-1.4-3-3v-35.4c0-1.7,1.3-3,3-3h72.9c1.7,0,3,1.3,3,3V141.5z"/>
				<path id="shift-left" class="st0" d="M115.8,185.4c0,1.7-1.3,3-3,3H18.9c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.3-3,3-3h93.8c1.7,0,3,1.4,3,3V185.4z"/>
				<path id="control" class="st0" d="M105,236c0,1.6-1.3,3-3,3H18.9c-1.6,0-3-1.4-3-3v-42c0-1.7,1.3-3,3-3H102c1.7,0,3,1.3,3,3V236z"/>
				<path id="option-left" class="st0" d="M182.4,236c0,1.7-1.4,3-3,3h-68.8c-1.7,0-3-1.3-3-3v-42c0-1.7,1.3-3,3-3h68.8c1.6,0,3,1.3,3,3V236z"/>
				<path id="option-right" class="st0" d="M531.8,191c1.7,0,3,1.4,3,3v42c0,1.7-1.3,3-3,3h-62.9c-1.6,0-3-1.3-3-3v-42c0-1.6,1.4-3,3-3H531.8z"/>
				<path class="st0" d="M668.8,236.1c0,1.7-1.3,3-3,3H540.3c-1.6,0-3-1.3-3-3v-42c0-1.6,1.4-3,3-3h125.5c1.7,0,3,1.4,3,3V236.1z"/>
				<path id="space" class="st0" d="M460.4,191c1.6,0,3,1.4,3,3v42c0,1.7-1.4,3-3,3H187.5c-1.6,0-3-1.3-3-3v-42c0-1.6,1.4-3,3-3H460.4z"/>
				<path id="shift-right" class="st0" d="M668.8,185.4c0,1.7-1.3,3-3,3h-94.5c-1.6,0-3-1.3-3-3v-35.3c0-1.6,1.4-3,3-3h94.5c1.7,0,3,1.4,3,3V185.4z"/>
			</g>
			<g id="letters">
				<text transform="matrix(1 0 0 1 33.4903 33.804)" class="st1">~</text>
				<text transform="matrix(1 0 0 1 35.8009 52.6643)" class="st1">`</text>
				<text transform="matrix(1 0 0 1 78.626 50.4071)" class="st1">1</text>
				<text transform="matrix(1 0 0 1 123.299 51.1765)" class="st1">2</text>
				<text transform="matrix(1 0 0 1 169.6841 51.404)" class="st1">3</text>
				<text transform="matrix(1 0 0 1 213.0758 51.404)" class="st1">4</text>
				<text transform="matrix(1 0 0 1 258.0724 51.404)" class="st1">5</text>
				<text transform="matrix(1 0 0 1 303.2822 51.0891)" class="st1">6</text>
				<text transform="matrix(1 0 0 1 349.5064 51.0891)" class="st1">7</text>
				<text transform="matrix(1 0 0 1 393.281 51.2157)" class="st1">8</text>
				<text transform="matrix(1 0 0 1 438.5742 51.2157)" class="st1">9</text>
				<text transform="matrix(1 0 0 1 483.4907 51.2157)" class="st1">0</text>
				<text transform="matrix(1 0 0 1 530.4011 50.4071)" class="st1">-</text>
				<text transform="matrix(1 0 0 1 573.5195 51.2157)" class="st1">=</text>
				<text transform="matrix(1 0 0 1 80.5513 31.7605)" class="st1">!</text>
				<text transform="matrix(1 0 0 1 119.8565 30.45)" class="st1">@</text>
				<text transform="matrix(1 0 0 1 169.6841 31.76)" class="st1">#</text>
				<text transform="matrix(1 0 0 1 213.0758 31.2171)" class="st1">$</text>
				<text transform="matrix(1 0 0 1 255.5748 30.8318)" class="st1">%</text>
				<text transform="matrix(1 0 0 1 303.9556 32.4427)" class="st1">^</text>
				<text transform="matrix(1 0 0 1 348.2554 31.76)" class="st1">&amp;</text>
				<text transform="matrix(1 0 0 1 394.5334 32.8236)" class="st1">*</text>
				<text transform="matrix(1 0 0 1 440.3076 30.6435)" class="st1">(</text>
				<text transform="matrix(1 0 0 1 485.1645 30.6435)" class="st1">)</text>
				<text transform="matrix(1 0 0 1 528.7588 25.5423)" class="st1">_</text>
				<text transform="matrix(1 0 0 1 573.5195 32.4422)" class="st1">+</text>
				<text transform="matrix(1 0 0 1 100.9088 75.4743)" class="st1">Q</text>
				<text transform="matrix(1 0 0 1 100.9088 93.4743)" class="st1">q</text>
				<text transform="matrix(1 0 0 1 145.3644 75.4744)" class="st1">W</text>
				<text transform="matrix(1 0 0 1 145.3644 93.4744)" class="st1">w</text>
				<text transform="matrix(1 0 0 1 190.5943 75.4744)" class="st1">E</text>
				<text transform="matrix(1 0 0 1 190.5943 93.4744)" class="st1">e</text>
				<text transform="matrix(1 0 0 1 236.9933 75.4743)" class="st1">R</text>
				<text transform="matrix(1 0 0 1 236.9933 93.4743)" class="st1">r</text>
				<text transform="matrix(1 0 0 1 280.6080 75.4744)" class="st1">T</text>
				<text transform="matrix(1 0 0 1 280.6080 93.4744)" class="st1">t</text>
				<text transform="matrix(1 0 0 1 326.5138 75.4744)" class="st1">Y</text>
				<text transform="matrix(1 0 0 1 326.5138 93.4744)" class="st1">y</text>
				<text transform="matrix(1 0 0 1 371.1386 75.4743)" class="st1">U</text>
				<text transform="matrix(1 0 0 1 371.1386 93.4743)" class="st1">u</text>
				<text transform="matrix(1 0 0 1 418.5557 75.4743)" class="st1">I</text>
				<text transform="matrix(1 0 0 1 418.5557 93.4743)" class="st1">i</text>
				<text transform="matrix(1 0 0 1 459.9639 75.4743)" class="st1">O</text>
				<text transform="matrix(1 0 0 1 459.9639 93.4743)" class="st1">o</text>
				<text transform="matrix(1 0 0 1 506.9335 75.4743)" class="st1">P</text>
				<text transform="matrix(1 0 0 1 506.9335 93.4743)" class="st1">p</text>
				<text transform="matrix(1 0 0 1 112.1346 120.3303)" class="st1">A</text>
				<text transform="matrix(1 0 0 1 112.1346 138.3303)" class="st1">a</text>
				<text transform="matrix(1 0 0 1 156.0135 120.3303)" class="st1">S</text>
				<text transform="matrix(1 0 0 1 156.0135 138.3303)" class="st1">s</text>
				<text transform="matrix(1 0 0 1 201.5241 120.3303)" class="st1">D</text>
			    <text transform="matrix(1 0 0 1 201.5241 138.3303)" class="st1">d</text>
				<text transform="matrix(1 0 0 1 247.1121 120.3303)" class="st1">F</text>
				<text transform="matrix(1 0 0 1 247.1121 138.3303)" class="st1">f</text>
				<text transform="matrix(1 0 0 1 289.4753 120.3303)" class="st1">G</text>
				<text transform="matrix(1 0 0 1 289.4753 138.3303)" class="st1">g</text>
				<text transform="matrix(1 0 0 1 335.5886 120.3303)" class="st1">H</text>
				<text transform="matrix(1 0 0 1 335.5886 138.3303)" class="st1">h</text>
				<text transform="matrix(1 0 0 1 382.2692 120.3303)" class="st1">J</text>
				<text transform="matrix(1 0 0 1 382.2692 138.3303)" class="st1">j</text>
				<text transform="matrix(1 0 0 1 426.0182 120.3303)" class="st1">K</text>
				<text transform="matrix(1 0 0 1 426.0182 138.3303)" class="st1">k</text>
				<text transform="matrix(1 0 0 1 470.8706 120.3303)" class="st1">L</text>
				<text transform="matrix(1 0 0 1 470.8706 138.3303)" class="st1">l</text>
				<text transform="matrix(1 0 0 1 134.7896 163.7458)" class="st1">Z</text>
				<text transform="matrix(1 0 0 1 134.7896 181.7458)" class="st1">z</text>
				<text transform="matrix(1 0 0 1 179.2339 163.7458)" class="st1">X</text>
				<text transform="matrix(1 0 0 1 179.2339 181.7458)" class="st1">x</text>
				<text transform="matrix(1 0 0 1 222.5416 163.7458)" class="st1">C</text>
				<text transform="matrix(1 0 0 1 222.5416 181.7458)" class="st1">c</text>
				<text transform="matrix(1 0 0 1 269.3973 163.7458)" class="st1">V</text>
				<text transform="matrix(1 0 0 1 269.3973 181.7458)" class="st1">v</text>
				<text transform="matrix(1 0 0 1 314.0098 163.7458)" class="st1">B</text>
				<text transform="matrix(1 0 0 1 314.0098 181.7458)" class="st1">b</text>
				<text transform="matrix(1 0 0 1 358.4863 163.7458)" class="st1">N</text>
				<text transform="matrix(1 0 0 1 358.4863 181.7458)" class="st1">n</text>
				<text transform="matrix(1 0 0 1 401.6816 163.7458)" class="st1">M</text>
				<text transform="matrix(1 0 0 1 401.6816 181.7458)" class="st1">m</text>
				<text transform="matrix(1 0 0 1 519.074 136.7127)" class="st1">;</text>
				<text transform="matrix(1 0 0 1 519.074 119.3763)" class="st1">:</text>
				<text transform="matrix(1 0 0 1 451.3285 180.0409)" class="st1">,</text>
				<text transform="matrix(1 0 0 1 450.2827 164.3396)" class="st1">&lt;</text>
				<text transform="matrix(1 0 0 1 495.9731 181.0409)" class="st1">.</text>
				<text transform="matrix(1 0 0 1 494.9274 164.3396)" class="st1">&gt;</text>
				<text transform="matrix(1 0 0 1 543.4077 181.0408)" class="st1">/</text>
				<text transform="matrix(1 0 0 1 541.3276 163.2498)" class="st1">?</text>
				<text transform="matrix(1 0 0 1 565.621 138.7127)" class="st1">&apos;</text>
				<text transform="matrix(1 0 0 1 565.621 120.3763)" class="st1">&quot;</text>
				<text transform="matrix(1 0 0 1 553.3923 94.426)" class="st1">[</text>
				<text transform="matrix(1 0 0 1 552.9709 74.8769)" class="st1">{</text>
				<text transform="matrix(1 0 0 1 598.7657 94.426)" class="st1">]</text>
				<text transform="matrix(1 0 0 1 598.3443 74.7849)" class="st1">}</text>
				<text transform="matrix(1 0 0 1 644.3574 96.8807)" class="st1">\</text>
				<text transform="matrix(1 0 0 1 644.4941 74.8769)" class="st1">|</text>
				<text id="text-tab" transform="matrix(1 0 0 1 23.3467 93.2342)" class="st1 st2 s">tab</text>
				<text id="caps-lock" transform="matrix(1 0 0 1 23.3467 137.7127)" class="st1 st2 s">caps lock</text>
				<text id="text-shift-left" transform="matrix(1 0 0 1 23.3467 181.0408)" class="st1 st2 s">shift</text>
				<text id="text-shift-right" transform="matrix(1 0 0 1 641.826 180.0408)" class="st1 st2 s">shift</text>
				<text id="text-backspace" transform="matrix(1 0 0 1 606.4653 51.1765)" class="st1 st2 s">backspace</text>
				<text id="text-enter" transform="matrix(1 0 0 1 636.3144 137.7128)" class="st1 st2 s">enter</text>
				<text transform="matrix(1 0 0 1 23.3467 232.465)" class="st1 st2 s">control</text>
				<text id="text-option-left" transform="matrix(1 0 0 1 129.2338 231.4646)" class="st1 st2 s">option</text>
				<text id="text-space" transform="matrix(1 0 0 1 199.7899 232.4646)" class="st1 st2 s">space</text>
				<text id="text-option-right" transform="matrix(1 0 0 1 483.8864 231.4646)" class="st1 st2 s">option</text>
			</g>
		</svg>
	</div>
	<script src="asset/js/jquery.min.js"></script>
	<script src="asset/js/vue.min.js"></script>
	<script>
		var $keyText = $('#letters > text');
		var keyVal = [];
		var keyMap = {};
		var letters = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m'];
		var symbol = [' ','?','.',','];
		var alias = ['space','slash','dot','comma'];
		//显示所有按键字符
		$.each($keyText,function(index) {
			if($(this).attr('class') == 'st1') $(this).attr('class','st1 st2');
			keyVal.push($(this).text());
		});
		//制造映射对象
		var length = keyVal.length;
		for(var i = 0; i < length; i++){
			keyMap[keyVal[i]] = i;
		}
		//初始化键盘字符位置
		$.each(letters,function(index) {
			setLetter(keyMap[$(this)[0]]);
			hideLetter(keyMap[$(this)[0].toUpperCase()]);
		})
		//设置小写字母位置
		function setLetter(index) {
			$keyText.eq(index).attr('dx','-5').attr('dy','-7').attr('class', 'st1 st2 b');
		}
		//隐藏大写字母
		function hideLetter(index) {
			$keyText.eq(index).attr('class', 'st1');
		}
		//设置预选样式
		function pretreatment(letter) {
			//if(letter == ' ') letter = 'space';
			//判断是否为字母键
			if(letters.indexOf(letter) >= 0){
				if($keyText.eq(keyMap[letter]).attr('class') == 'st1 st2 b active'){
					$keyText.eq(keyMap[letter]).attr('class', 'st1 st2 b');
				}else{
					$keyText.eq(keyMap[letter]).attr('class', 'st1 st2 b active');
				}
			//符号有另一种显示方式
			}else if(symbol.indexOf(letter) >= 0){
				if($keyText.eq(keyMap[letter]).attr('class') == 'st1 st2 active'){
					$keyText.eq(keyMap[letter]).attr('class', 'st1 st2');
				}else{
					$keyText.eq(keyMap[letter]).attr('class', 'st1 st2 active');
				}

				letter = alias[symbol.indexOf(letter)];
			}else{
				if($('#text-' + letter).attr('class') == 'st1 st2 s active'){
					$('#text-' + letter).attr('class', 'st1 st2 s');
				}else{
					$('#text-' + letter).attr('class', 'st1 st2 s active');
				}
			}


			if($('#' + letter).attr('class') == 'st0 active'){
				$('#' + letter).attr('class', 'st0');
			}else{
				$('#' + letter).attr('class', 'st0 active');	
			}
		}
	</script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				article:[
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],








					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'w',
							input:null,
							status:null,
						},
						{
							letter:'h',
							input:null,
							status:null,
						},
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'t',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'a',
							input:null,
							status:null,
						},
						{
							letter:'r',
							input:null,
							status:null,
						},
						{
							letter:'e',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'y',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'u',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
					[
						{
							letter:'d',
							input:null,
							status:null,
						},
						{
							letter:'o',
							input:null,
							status:null,
						},
						{
							letter:'i',
							input:null,
							status:null,
						},
						{
							letter:'n',
							input:null,
							status:null,
						},
						{
							letter:'g',
							input:null,
							status:null,
						},
						{
							letter:'?',
							input:null,
							status:null,
						},
						{
							letter:' ',
							input:null,
							status:null,
						},
					],
				],
				letterIndex:0,
				wordIndex:0,
				inputIndex:0,
				subscriptIndex:0,
				inputText:'',
				articleText:'what are you doing? ',
				articleReload:null,
				articleDom:null,
				subscriptDom:null,
			},
			methods:{
				correct:function() {
					
					//结束判断还有问题
					if(this.letterIndex < 0 && this.wordIndex == 0){
						this.wordIndex = 0;
						this.letterIndex = 0;

						return true;
					//删除操作会导致字母索引为负数，此时将索引指向上一个单词最后一个字母索引
					}else if(this.letterIndex<0){
						this.wordIndex -= 1;
						this.letterIndex = this.article[this.wordIndex].length - 1;

						return true;
					}else{
						//超出文章索引
						if(this.wordIndex == this.article.length){
							return false;
						}
						//每次key down 都将letterIndex偏移量自增，并判断是否超出word长度，若超出，则增加wordIndex偏移量
						if (this.letterIndex < this.article[this.wordIndex].length) {
							return true;
						}else{
							this.wordIndex += 1;
							this.letterIndex = 0;

							return this.correct();
						}
					}
				},
				moveSubscript:function(index) {
					this.$refs.subscript.style.left = this.$refs.articleLetter[index].offsetLeft + 'px';
					this.$refs.subscript.style.top = this.$refs.articleLetter[index].offsetTop - 25 + 'px';

				},
				inputKey:function(newData, oldData) {
					if(newData<oldData){
						this.letterIndex -= 1;
						this.inputIndex -= 1;
					}
					if(this.correct()){
						//设置下标提示
						this.moveSubscript(newData.length);
						//设置按键提示
						pretreatment(this.articleText[oldData.length]);
						pretreatment(this.articleText[newData.length]);

						//删除操作后撤销正确与错误提示
						if(newData<oldData){
							this.article[this.wordIndex][this.letterIndex].status = 0;
						//输入字母正确性判断
						}else if(this.article[this.wordIndex][this.letterIndex].letter == this.inputText[oldData.length]){
							this.article[this.wordIndex][this.letterIndex].status = 1;
						}else{
							this.article[this.wordIndex][this.letterIndex].status = -1;
						}
					}else{
						console.log('error:单词下标偏移');
					}

					//判断输入是否为删除操作
					if(newData>oldData){
						this.letterIndex += 1;
						this.inputIndex += 1;
					}	
				},
				paly:function() {
					if(letters.indexOf(this.article[this.wordIndex][this.letterIndex-1].letter) >= 0){
						this.$refs['audio_' + this.article[this.wordIndex][this.letterIndex-1].letter].play();
					}
					
				},
				reload:function() {
					this.article = this.clone(this.articleReload);
					this.moveSubscript(0);
					this.letterIndex=0;
					this.wordIndex=0;
					this.inputIndex=0;
					this.subscriptIndex=0;
					this.inputText='';
					
				},
				clone:function clone(obj) {
				    var o;
				    if (typeof obj == "object") {
				        if (obj === null) {
				            o = null;
				        } else {
				            if (obj instanceof Array) {
				                o = [];
				                for (var i = 0, len = obj.length; i < len; i++) {
				                    o.push(clone(obj[i]));
				                }
				            } else {
				                o = {};
				                for (var j in obj) {
				                    o[j] = clone(obj[j]);
				                }
				            }
				        }
				    } else {
				        o = obj;
				    }
				    return o;
				},
				changeContainerHeight:function() {
					console.log(this.$refs.progressBar.clientTop , this.$refs.subscript.clientTop);
					if((this.$refs.progressBar.offsetTop - this.$refs.subscript.offsetTop) <= 154){
						this.$refs.article.style.top = app.$refs.article.offsetTop - 74 + 'px';
					}
				}
			},
			watch:{
				inputText:function(newData, oldData) {
					this.inputKey(newData, oldData);
					this.paly();
					this.changeContainerHeight();
				}
			},
			mounted:function() {
				pretreatment(this.articleText[0]);
				this.articleReload = this.clone(this.article);
			    $('#hideInput').focus();
			    window.onclick = function() {
		    		$('#hideInput').focus();
			    }
			    this.subscriptDom = $('#subscript')[0];
			    this.articleDom = $('.article:eq(0)')[0];
			    this.progressBarDom = $('#progress-bar')[0];
			},
		});
	</script>
</body>
</html>